  <template>
  <div class="personal-order">
    <div class="personal-order-header">
      <div class="personal-order-title">
        {{$t('message.myOrder')}}
      </div>
      <div class="personal-order-search">
        <div class="personal-order-search-input">
          <input type="text" v-model="keyword" :placeholder="$t('message.searchDesc')" @keyup.enter="search" />
        </div>
        <div class="personal-order-search-btn">
          <button type="button" @click="search()"></button>
        </div>
      </div>
    </div>
    <div class="personal-order-nav">
      <ul @mouseleave="leaveTab">
        <li class="personal-order-nav-item" :class="{ 'personal-order-item-active': type === '0' }" @mouseenter="tabSwitch(0)" @click="changeType('0')">
          {{$t('message.allOrder')}}
        </li>
        <li class="personal-order-nav-item" :class="{ 'personal-order-item-active': type === '1' }" @mouseenter="tabSwitch(1)" @click="changeType('1')">
          {{$t('message.underReview')}}
        </li>
        <li class="personal-order-nav-item" :class="{ 'personal-order-item-active': type === '2' }" @mouseenter="tabSwitch(2)" @click="changeType('2')">
          {{$t('message.paymentPending')}}
        </li>
        <li class="personal-order-nav-item" :class="{ 'personal-order-item-active': type === '3' }" @mouseenter="tabSwitch(3)" @click="changeType('3')">
          {{$t('message.waitToSend')}}
        </li>
        <li class="personal-order-nav-item" :class="{ 'personal-order-item-active': type === '4' }" @mouseenter="tabSwitch(4)" @click="changeType('4')">
          {{$t('message.hasBeenShipped')}}
        </li>
        <li class="personal-order-nav-item personal-order-no-right" :class="{ 'personal-order-item-active': type === '5' }" @mouseenter="tabSwitch(5)" @click="changeType('5')">
          {{$t('message.afterSale')}}
        </li>
      </ul>
      <div class="personal-order-nav-hover" :style="{ width: hoverWidth + 'px', transform: 'translate(' + translate + 'px)'}"></div>
    </div>
    <ul class="personal-all-order-title">
      <li class="personal-all-order-product">{{$t('message.goods')}}</li>
      <li class="personal-all-order-price">{{$t('message.price')}}</li>
      <li class="personal-all-order-pay">{{$t('message.hasPay')}}</li>
      <li class="personal-all-order-state">{{$t('message.state')}}</li>
      <li class="personal-all-order-operation">{{$t('message.operation')}}</li>
    </ul>
    <!--加载中-->
    <div class="loading" v-if="status === 'loading'">
    	<v-loading></v-loading>
    </div>
    <div class="personal-order-container" v-if="status === 'complete'">
      <div class="personal-order-item" v-for="(item, index) in orders" :key="index">
        <personal-order-item :order="item" @cancel-order="showCancelDialog($event)" @delete-order="showDeleteDialog($event)"></personal-order-item>
      </div>
      <div class="personal-order-pages">
        <v-pager :page-num="pageNumber" :active-index="page" :total="total" @change-page="changeParams($event)"></v-pager>
      </div>
    </div>
    <div class="personal-order-null" v-if="status === 'null'">
      <div class="personal-order-null-illustration"></div>
      <div class="personal-order-null-text">
        {{ $t('message.noOrder') }}
      </div>
    </div>
    <v-dialog v-if="isShowDeleteDialog">
      <div class="personal-cancel-order">
        <div class="personal-cancel-order-text">
          {{$t('message.doCancelOrder')}}
        </div>
        <div class="personal-cancel-order-btn-group">
          <button type="button" class="delete-btn delete-btn-yes" @click="deleteOrder">{{$t('message.yes')}}</button>
          <button type="button" class="delete-btn delete-btn-no" @click="closeDeleteDialog">
            {{$t('message.no')}}
          </button>
        </div>
      </div>
    </v-dialog>
    <v-dialog v-if="isShowCancelDialog">
      <div class="personal-cancel-order">
        <div class="personal-cancel-order-text">{{$t('message.confirmCancelOrder')}}</div>
        <div class="personal-cancel-order-btn-group">
          <button type="button" class="delete-btn delete-btn-yes" @click="cancelOrder">{{$t('message.yesCancelOrder')}}</button>
          <button type="button" class="delete-btn delete-btn-no" @click="closeCancelDialog">{{$t('message.noCancelOrder')}}</button>
        </div>
      </div>
    </v-dialog>
  </div>
</template>

<script>
import VLoading from '@/components/base/VLoading'
import PersonalOrderItem from '@/components/personal/order/PersonalOrderItem'
import VPager from '@/components/base/VPager'
import VDialog from '@/components/base/VDialog'

export default {
  name: 'PersonalOrder',
  components: {
    VLoading,
    PersonalOrderItem,
    VPager,
    VDialog
  },
  props: ['type', 'page'],
  data () {
    return {
      status: 'loading',
      translate: 0,
      hoverWidth: 136,
      orders: null,
      pageNumber: 0,
      types: ['0', '1', '2', '6', '7', '8,12,13,14,15,16,17,18,19,20,22,23,24,25,26'],
      total: 0,
      keyword: '',
      isShowDeleteDialog: false,
      isShowCancelDialog: false,
      deleteNumber: null,
      cancelNumber: null
    }
  },
  methods: {
    tabSwitch (index) {
      this.translate = index * (this.hoverWidth + 2)
    },
    leaveTab () {
      this.tabSwitch(parseInt(this.type))
    },
    getOrder (n, type, keyword) {
      this.status = 'loading'
      this.orders = null
      let types = type || this.type
      types = parseInt(types)
      let page = n || 1
      this.$ajax.getOrderAll(page, this.types[types], keyword).then((res) => {
        if (res.code === 200) {
          if (res.data.item_count === 0) {
            this.status = 'null'
          } else {
            this.orders = res.data.orders
            this.pageNumber = res.data.page_count
            this.total = res.data.item_count
            this.status = 'complete'
          }
          document.documentElement.scrollTop = 190
          document.body.scrollTop = 190
        } else if (res.code === 201) {
          this.status = 'null'
        } else if (res.code === 301) {
          this.$router.push({path: '/login', query: {redirect: this.$route.fullPath}})
        }
      }).catch((err) => {
        console.log(err)
      })
    },
    changeType (type) {
      if (type !== this.type) {
        this.$router.push({ path: `/personal/order/${type}/1` })
        this.getOrder(1, type)
      }
    },
    changeParams (n) {
      this.$router.push({ path: `/personal/order/${this.type}/${n}` })
      this.getOrder(n)
    },
    showDeleteDialog (num) {
      this.deleteNumber = num
      this.isShowDeleteDialog = true
    },
    closeDeleteDialog () {
      this.deleteNumber = null
      this.isShowDeleteDialog = false
    },
    showCancelDialog (num) {
      this.cancelNumber = num
      this.isShowCancelDialog = true
    },
    closeCancelDialog () {
      this.cancelNumber = null
      this.isShowCancelDialog = false
    },
    // 搜索订单
    search () {
      this.getOrder(1, this.type, this.keyword)
    },
//    取消订单
    cancelOrder () {
      this.$ajax.cancelOrder({
        id: this.cancelNumber
      }).then((res) => {
        if (res.code === 200) {
          this.getOrder(this.page, this.type)
          this.closeCancelDialog()
        } else if (res.code === 202) {
          console.log('取消订单失败')
        } else if (res.code === 301) {
          this.$router.push({path: '/login', query: {redirect: this.$route.fullPath}})
        }
      })
    },
//    删除订单
    deleteOrder () {
      this.$ajax.deleteOrder({
        order_num_md5: this.deleteNumber
      }).then((res) => {
        if (res.code === 200) {
          this.getOrder(this.page, this.type)
          this.closeDeleteDialog()
        } else if (res.code === 301) {
          this.$router.push({path: '/login', query: {redirect: this.$route.fullPath}})
        } else {
          this.$store.commit('alert', {
            switch: true,
            alertText: this.$t('message.deleteFail')
          })
          this.closeDeleteDialog()
        }
      })
    }
  },
  created () {
    this.getOrder(this.page, this.type)
    this.leaveTab()
  }
}
</script>

<style scoped>
.personal-order {
  width: 864px;
  padding: 40px;
}

.personal-order-header {
  height: 44px;
  overflow: hidden;
}

.personal-order-title {
  float: left;
  height: 42px;
  line-height: 42px;
  font-size: 30px;
  color: #333;
  margin-top: 2px;
}

.personal-order-search {
  float: right;
  width: 344px;
  height: 44px;
  overflow: hidden;
}

.personal-order-search-input {
  float: left;
  width: 300px;
  height: 44px;
}

.personal-order-search-input > input {
  width: 300px;
  height: 44px;
  border: 1px solid #d7d7d7;
  padding: 0 13px;
  font-size: 14px;
  box-sizing: border-box;
}

.personal-order-search-btn {
  float: left;
  width: 44px;
  height: 44px;
}

.personal-order-search-btn > button {
  width: 44px;
  height: 44px;
  border: 1px solid #d7d7d7;
  border-left: 0;
  background: url(../../../assets/images/icon_search.png) no-repeat center;
  cursor: pointer;
}

.personal-order-nav {
	min-height: 40px;
  border-bottom: 1px solid #e6e6e6;
  margin-top: 40px;
  position: relative;
}

.personal-order-nav ul {
  overflow: hidden;
}

.personal-order-nav .personal-order-nav-item {
  float: left;
  width: 136px;
  line-height: 22px;
  font-size: 16px;
  text-align: center;
  margin-right: 2px;
  cursor: pointer;
  position: relative;
}

.personal-order-nav .personal-order-nav-item:hover, .personal-order-item-active {
  color: #ff600a;
}

.personal-order-nav .personal-order-nav-item:after {
  content: '';
  display: block;
  width: 2px;
  height: 16px;
  background-color: #e6e6e6;
  position: absolute;
  top: 6px;
  right: -2px;
}

.personal-order-nav .personal-order-no-right {
  width: 92px;
  text-align: right;
  margin-right: 0;
}

.personal-order-nav .personal-order-no-right:after {
  display: none;
}

.personal-order-nav-hover {
  height: 2px;
  background-color: #ff600a;
  position: absolute;
  bottom: 0;
  left: 0;
  transition: transform .5s;
}

.personal-all-order-title {
  height: 52px;
  background-color: #f7f7f7;
  margin-top: 24px;
  overflow: hidden;
}

.personal-all-order-title li {
  float: left;
  height: 52px;
  line-height: 52px;
  font-size: 14px;
  font-weight: bold;
  color: #333;
}

.personal-all-order-product {
  width: 354px;
  padding-left: 24px;
}

.personal-all-order-price {
  width: 118px;
}

.personal-all-order-pay {
  width: 132px;
}

.personal-all-order-state {
  box-sizing: border-box;
  padding-left: 25px;
  width: 118px;
}

.personal-all-order-operation {
  box-sizing: border-box;
  padding-left: 20px;
  width: 118px;
}

.personal-order-item {
  margin-top: 24px;
}

.personal-order-pages {
  height: 30px;
  margin-top: 80px;
}

.personal-order-null {
  padding: 100px 0 0;
}

.personal-order-null-illustration {
  width: 300px;
  height: 200px;
  margin: 0 auto;
  background: url(../../../assets/images/personal/illustration_order.png) no-repeat center;
}

.personal-order-null-text {
  height: 22px;
  line-height: 22px;
  font-size: 16px;
  color: #666;
  margin-top: 10px;
  text-align: center;
}

.personal-cancel-order {
  width: 460px;
  height: 230px;
  font-size: 0;
  background-color: #fff;
}

.personal-cancel-order-text {
  height: 25px;
  line-height: 25px;
  font-size: 18px;
  color: #333;
  text-align: center;
  padding: 60px 0;
}

.personal-cancel-order-btn-group {
  width: 320px;
  margin: 0 auto;
}

.personal-cancel-order-btn-group .delete-btn {
  width: 140px;
  height: 46px;
  border: 1px solid #ff600a;
  font-size: 14px;
  cursor: pointer;
}

.personal-cancel-order-btn-group .delete-btn-yes {
  color: #fff;
  background-color: #ff600a;
  margin-right: 40px;
}

.personal-cancel-order-btn-group .delete-btn-yes:hover {
  background-color: #ff3c00;
}

.personal-cancel-order-btn-group .delete-btn-yes:active {
  background-color: #e83700;
}

.personal-cancel-order-btn-group .delete-btn-no {
  color: #ff600a;
  background-color: #fff;
}

.personal-cancel-order-btn-group .delete-btn-no:hover {
  color: #fff;
  background-color: #ff600a;
}

.personal-cancel-order-btn-group .delete-btn-no:active {
  color: #fff;
  background-color: #e83700;
}

.loading {
  margin-top: 160px;
}
</style>
